<!-- 聊天 -->
<template>
  <div class="chat-contain">
    <div
      class="chat-box"
      :style="{
        width: isFullScreen ? '100%' : '1200px',
        height: isFullScreen ? '100%' : '674px'
      }"
    >
      <jat-menu
        @selectChange="handleSelectChange"
        @fullScreenChange="handleChangeFullScreen"
      ></jat-menu>
      <keep-alive>
        <component
          ref="chatContent"
          class="chat-content"
          :is="activeComponent"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import JatMenu from "@/components/jatMenu.vue"
import personal from "@/components/main/personal.vue"
import chat from "@/components/main/chat.vue"
import addressBook from "@/components/main/addressBook.vue"
import lockr from "lockr"
import systemSet from "@/components/main/systemSet.vue"
import { mapState } from "vuex"
import file from "@/components/main/file.vue"

export default {
  components: { JatMenu },
  data() {
    return {
      activeComponent: chat,
      components: {},
      isFullScreen: false,
      componentsSelect: {
        avatar: personal,
        badge: chat,
        contact: addressBook,
        folde: file,
        set: systemSet
      }
    }
  },
  created() {
    this.initApi()
    this.initFullScreen()
    this.initNoticeMessage()
  },

  computed: {
    ...mapState(["activeMenu"])
  },

  methods: {
    handleSelectChange(val) {
      this.activeComponent = this.componentsSelect[val]
    },
    async initApi() {
      console.log("初始化")
      this.$store.dispatch("getRecentChatList", true)
      await this.$store.dispatch("getGroupList")
    },
    initFullScreen() {
      const isFull = lockr.get("fullScreen")
      if (isFull === true || isFull === false) {
        this.isFullScreen = isFull
      } else {
        this.isFullScreen = false
      }
    },
    initNoticeMessage() {
      console.log(Notification.permission == "granted")
      if (window.Notification) {
        // 浏览器通知--window.Notification
        if (Notification.permission == "granted") {
          console.log("允许通知")
        } else if (Notification.permission != "denied") {
          console.log("需要通知权限")
          Notification.requestPermission((permission) => {})
        }
      } else {
        console.error("浏览器不支持Notification")
      }
    },
    handleChangeFullScreen() {
      lockr.set("fullScreen", !this.isFullScreen)
      this.isFullScreen = !this.isFullScreen
    }
  },
  watch: {
    activeMenu(val) {
      if (val === "badge") {
        this.handleSelectChange(val)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.chat-contain {
  width: 100%;
  height: 100%;
  background: url("@/assets/img/bg.png") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .chat-box {
    background: #fff;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: flex;
  }

  .chat-content {
    flex: 1;
  }
}
</style>
